<template>
  <div class="payRecode" id="payRecode">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/payRecode' }">搜索查询缴费信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="condition-search">
      <div class="demo-input-suffix-1">
        <div class="fix-div">
          <mark>姓名</mark>
          <input size="mini" prefix-icon="el-icon-search" v-model="searchName.name" />
          <mark>学号</mark>
          <input size="mini" prefix-icon="el-icon-search" v-model="searchName.notice_num" />
          <mark>身份证</mark>
          <input size="mini" prefix-icon="el-icon-search" v-model="searchName.id_card" />
          <mark>年级</mark>
          <el-select v-model="searchName.grade" placeholder="请选择">
            <el-option v-for="(item,index) in option" :key="item+index" :label="item.text" :value="item.id"></el-option>
          </el-select>
          <!-- <input size="mini" prefix-icon="el-icon-search" v-model="searchName.grade" /> -->
           <mark>是否退学</mark>
          <el-select v-model="searchName.is_out_school" placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="2"></el-option>
          </el-select>
          <el-button class="fix-btn" type="primary" size="mini" icon="el-icon-search" @keyup.enter="Sous" @click="Sous">搜索</el-button>
        </div>
      </div>
    </el-row>
    <el-table id="exportTab" :data="respDataList" v-loading="listLoading" border stripe style="width: 100%;color:#000000;">
      <!-- <el-table-column prop="id" type="selection" label="全选" align="center"></el-table-column> -->
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="notice_number" label="学号" align="center"></el-table-column>
      <el-table-column prop="courtyard_department" label="院系" align="center"></el-table-column>
      <el-table-column prop="professional" label="专业" align="center"></el-table-column>
      <el-table-column prop="grade" label="年级" align="center"></el-table-column>
      <el-table-column prop="amount_payable" label="应付金额" align="center"></el-table-column>
      <el-table-column prop="amount_real" label="实付金额" align="center"></el-table-column>
      <el-table-column prop="pay_success_time" label="收费时间" align="center"></el-table-column>
      <el-table-column prop="admin_users_name" label="收费人员" align="center"></el-table-column>
      <el-table-column  label="是否退学" align="center">
           <template slot-scope="scope">
                {{scope.row.is_out_school==1?'是':'否'}}
            </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" min-width="118px">
        <template slot-scope="scope">
          <el-button size="mini" plain @click="handleEdit(scope.$index, scope.row)" style="color: #000000;">编辑</el-button>
          <el-button size="mini" plain @click="handleDetail(scope.$index, scope.row)" style="color: #000000;">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next, jumper, total" :current-page="pageInfo.currentPage" :page-size="pageInfo.pageSize"
      :total="pageInfo.pageTotal" @current-change="handleCurrentChange"></el-pagination>

  </div>
</template>

<script>
  import apis from '../apis/apis';
  export default {
    data() {
      return {
        value: '',
        respData: {},
        option:[],
        respDataList: [],

        listLoading: false,

        pageInfo: {
          currentPage: 1,
          pageSize: 20,
          pageTotal: 1
        }, //分页
        // 表单编辑
        searchName: {
          is_out_school:'',
          grade:'',
          pageSize: 20,
          page: 1,
          name: '',
          id_card: '',
          notice_num: '',

        },
        form: {
          professional: '',
          courtyard_department: '',
          grade: '',
          card_number: '',
          is_out_school: '',
        },
      }
    },
    mounted() {
      var self = this;
      self.getPayment(self.searchName);
      let myDate= new Date();
      let tYear= myDate.getFullYear()
      console.log(tYear)
      self.option=[{
          text:tYear,
          id:tYear
      },{
        text:tYear-1,
        id:tYear-1
      },{
        text:tYear-2,
        id:tYear-2
      },{
        text:tYear-3,
        id:tYear-3
      }]
      console.log(self.option)

    },
    methods: {
      /* 搜索 */
      Sous() {
        var self = this;
        self.pageInfo.currentPage = self.searchName.page = 1;
        self.getPayment(self.searchName);
        const loading = this.$loading({
          lock: true,
          text: '正在加载数据…',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      },
      getPayment(search) {
        var self = this;
        apis.contApi.payCodeList(search).then((res) => {
          if (res.data.code == 0) {
            self.respData = res.data.data;
            self.pageInfo.pageTotal = self.respData.count;

            self.respDataList = self.respData.list;
            // self.respDataList=data.map()
            // console.log(self.respDataList)
          }
        }).catch((error) => {
        });

      },
      handleCurrentChange(val) {
        var self = this;
        self.pageInfo.currentPage = val;
        self.searchName.page = val;
        self.getPayment(self.searchName);
      },
      /** 打开编辑弹窗 */
      handleEdit(index, rowData) {

        var self = this;
        var params = {
          id: rowData.id
        };
        self.$router.push({
          path: '/paycostEdit',
          query: {
            data: rowData
          }
        });

      },
      /** 打开详情页 */
      handleDetail(index, rowData) {
        var self = this;
        this.$store.commit('changePaycost', rowData);
        self.$router.push({
          path: '/paycostDetail',
          query: {
            data: rowData
          }
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .payRecode {
    width: 100%;
    height: 100%;
  }

  /* 条件筛选 */
  .condition-search {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 10px 0;
    height: 66px;
    width: 100%;
    text-align: left;
  }

  .condition-search>.demo-input-suffix {}

  .condition-search>.demo-input-suffix-1 {
    position: absolute;
    left: 0;
    width: calc(100% - 368px);
    font-size: 15px;
  }

  .condition-search>.demo-input-suffix-1 mark {
    background-color: #FFFFFF;
    min-width: 45px;
    line-height: 32px;
    padding: 0 5px;
    text-align: left;
  }

  .condition-search>.demo-input-suffix-1 input,
  .condition-search>.demo-input-suffix-1 select {
    width: 115px;
    height: 30px;
    margin: 0;
    text-indent: 5px;
    color: #00d1b2;
    outline: none;
    border: none;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #00d1b2;
  }

  .condition-search>.demo-input-suffix-1 input::-webkit-input-placeholder {
    color: #00d1b2;
  }

  .condition-search>.demo-input-suffix-1 button,
  .condition-search>.demo-input-suffix-2 button {
    height: 30px;
    margin: 0;
  }

  .condition-search>.demo-input-suffix-1 input.el-input__inner {
    border-radius: 3px 0 0 3px;
  }

  .condition-search>.demo-input-suffix-2 {
    position: absolute;
    right: 0;
    width: 368px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  /deep/ .el-select .el-input .el-select__caret{
    line-height: 29px !important;
  }
</style>
